<template>
  <el-breadcrumb separator="/" class="bread">
    <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">
      <span class="no-redirect" v-if="index === breadList.length - 1">
        {{ item.name }}</span
      >
      <span class="redirect" v-else @click="handleRedirect(item.path)">
        {{ item.name }}</span
      >
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, watch } from "vue";

const route = useRoute();
const router = useRouter();
const breadList = ref([]);
const initbreadList = () => {
  breadList.value = route.matched;
  // console.log(route.matched)
};

const handleRedirect = (path) => {
  router.push(path);
};

watch(
  route,
  () => {
    initbreadList();
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="less" scoped>
.bread :deep(span) {
  color: #fff !important;
  cursor: pointer !important;
}

.no-redirect {
  cursor: text;
  color: #fff !important;
}
.redirect {
  color: rgb(229, 245, 11);
  cursor: pointer;
}
</style>
